<template>
  <div class="users">
    <div class="users-wrapper">
      <div class="aside">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="!!true"
        >
          <el-menu-item v-for="data in el_menu" style="height: 50px" :key="data.to" :index="data.to">
            <i :class="data.icon"></i>
            <span>{{ data.label }}</span>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ el_menu_gm.label }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="data in el_menu_gm.children" :key="data.to" :index="data.to">
                <i :class="data.icon"></i>
                {{ data.label }}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="2" @click="logout()">
            <i class="el-icon-menu"></i>
            <span slot="title">退出登录</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="body scroll-bar">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>
    <footnote />
  </div>
</template>

<script>
import footnote from "@/components/footnote";
export default {
  name: "users-index",
  components: {
    footnote
  },
  data() {
    return {
      inter: 0,
      el_menu: [
        {
          label: "个人资料",
          to: "/users/ps_info",
          icon: "el-icon-user"
        },
        {
          label: "说说",
          to: "/users/ps_ss",
          icon: "el-icon-star-off"
        },
        {
          label: "日志",
          to: "/users/ps_rz",
          icon: "el-icon-document"
        },
        {
          label: "相册",
          to: "/users/ps_xc",
          icon: "el-icon-camera"
        },
        {
          label: "视频",
          to: "/users/ps_sp",
          icon: "el-icon-video-camera"
        },
        {
          label: "技术文章",
          to: "/users/ps_skill",
          icon: "el-icon-document-copy"
        },
        {
          label: "管理消息",
          to: "/users/ps_message",
          icon: "el-icon-message"
        }
      ],
      el_menu_gm: {
        label: "后台管理",
        children: [
          {
            label: "个人资料操作",
            to: "/users/gm_info",
            icon: "el-icon-s-custom"
          },
          {
            label: "说说操作",
            to: "/users/gm_ss",
            icon: "el-icon-edit"
          },
          {
            label: "日志操作",
            to: "/users/gm_rz",
            icon: "el-icon-edit-outline"
          },
          {
            label: "相册操作",
            to: "/users/gm_xc",
            icon: "el-icon-money"
          },
          {
            label: "视频操作",
            to: "/users/gm_sp",
            icon: "el-icon-video-camera-solid"
          },
          {
            label: "技术文章操作",
            to: "/users/gm_skill",
            icon: "el-icon-s-order"
          }
        ]
      }
    };
  },
  computed: {
    activeIndex() {
      return "/users/" + this.$route.name;
    }
  },
  mounted() {
    this.inter = setInterval(this.lookInitInfoData, 20);
  },
  methods: {
    lookInitInfoData() {
      let initFlog = this.$store.state.user.initFlog;
      if (initFlog === 0) {
        clearInterval(this.inter);
        this.$router.push("/blogs");
      } else if (initFlog === 1) {
        clearInterval(this.inter);
      }
    },
    logout() {
      localStorage.setItem("from_17yong", JSON.stringify({}));
      this.$store.commit("user/setUserName", "");
      this.$router.push({ path: "/log_in" });
      this.$store.commit("user/setUserInfoData", "");
    }
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.users
  width: 100%
  height: 93vh
  overflow: hidden
  .users-wrapper
    width: 1280px
    height: 84vh
    margin: 0 auto
    @include flex(flex-satrt,flex-start)
    .aside
      flex: 0 0 20%
      height: 100%
      overflow: auto
      .el-menu
        width: 100%
        height: 100%
        .el-menu-item
          color: red
    .body
      flex: 1
      height: 100%
      background-color: #fff
      overflow: auto
</style>